<template>
    <view>
        <!-- 巡视过程 -->
        <u-popup
            :round="20"
            :show="visible"
            closeable
            @close="handleClose()"
        >
            <view class="vital-sign-form">
                <view class="vital-sign-form-title">测量生命体征</view>
                <view class="vital-sign-form-main">
                    <view class="vital-sign-form-item">
                        <view class="form-item-label">巡视过程</view>
                        <view class="form-item-value">
                            <u-input
                                v-model="form.processLabel"
                                disabled
                                disabledColor="#ffffff"
                                placeholder="请选择"
                                border="none"
                                suffixIcon="arrow-down"
                                :adjustPosition="false"
                            ></u-input>
                            <view class="picker-wrapper" @click="openTour()">
                            </view>
                        </view>
                    </view>
                    <view class="vital-sign-form-item">
                        <view class="form-item-label">记录时间</view>
                        <view class="form-item-value">
                            <!-- <u-input
                                v-model="form.datetimeStr"
                                disabled
                                disabledColor="#ffffff"
                                placeholder="请选择"
                                border="none"
                                suffixIcon="calendar"
                            ></u-input>
                            <view class="picker-wrapper" @click="showDatePicker = true">
                            </view>
                            <u-datetime-picker
                                :show="showDatePicker"
                                v-model="form.datetime"
                                mode="datetime"
                                @confirm="datePickerConfirm"
                                @cancel="datePickerCancel"
                            ></u-datetime-picker> -->
                            <div>{{form.datetimeStr}}</div>
                        </view>
                    </view>
                    <view class="vital-sign-form-item" v-if="form.processValue != '10' && form.processValue != '5'">
                        <view class="form-item-label">体温</view>
                        <view class="form-item-value">
                            <!-- <view class="mb-20">
                                <u-radio-group v-model="form.twType" placement="row">
                                    <u-radio shape="circle" label="耳温" name="1"></u-radio>
                                    <u-radio shape="circle" label="腋温" name="2"></u-radio>
                                    <u-radio shape="circle" label="口温" name="3"></u-radio>
                                    <u-radio shape="circle" label="肛温" name="4"></u-radio>
                                </u-radio-group>
                            </view> -->
                            <view>
                                <u-input v-model="form.twValue" 
                                    placeholder="请输入" 
                                    border="none"
                                    :adjustPosition="false">
                                    <template slot="suffix">
                                        <u--text
                                            text="℃"
                                            slot="prefix"
                                            margin="0 3px 0 0"
                                            type="tips"
                                        ></u--text>
                                    </template>
                                </u-input>
                            </view>
                        </view>
                    </view>
                    <view class="vital-sign-form-item" v-if="form.processValue != '10' && form.processValue != '5'">
                        <view class="form-item-label">脉搏</view>
                        <view class="form-item-value">
                            <u-input v-model="form.mb" 
                                placeholder="请输入" 
                                border="none"
                                :adjustPosition="false">
                                <template slot="suffix">
                                    <u--text
                                        text="次/分"
                                        slot="prefix"
                                        margin="0 3px 0 0"
                                        type="tips"
                                    ></u--text>
                                </template>
                            </u-input>
                        </view>
                    </view>
                    <view class="vital-sign-form-item" v-if="form.processValue != '10' && form.processValue != '5'">
                        <view class="form-item-label">血压</view>
                        <view class="form-item-value">
                            <view class="d-flex">
                                <u-input v-model="form.ssy" 
                                    placeholder="收缩压" 
                                    border="none"
                                    style="width: calc(50% - 30rpx);border-right:1px solid #A1A1A1;"
                                    :adjustPosition="false">
                                </u-input>
                                <div style="padding:10rpx">/</div>
                                <u-input v-model="form.szy" 
                                    placeholder="舒张压" 
                                    border="none"
                                    style="width: calc(50% - 30rpx);"
                                    :adjustPosition="false">
                                    <template slot="suffix">
                                        <u--text
                                            text="mmHg"
                                            slot="prefix"
                                            margin="0 3px 0 0"
                                            type="tips"
                                        ></u--text>
                                    </template>
                                </u-input>
                            </view>
                            
                        </view>
                    </view>
                    <view class="vital-sign-form-item" v-if="form.processValue != '10' && form.processValue != '5'">
                        <view class="form-item-label">呼吸</view>
                        <view class="form-item-value">
                            <u-input v-model="form.hx" 
                                placeholder="请输入" 
                                border="none"
                                :adjustPosition="false">
                                <template slot="suffix">
                                    <u--text
                                        text="次/分"
                                        slot="prefix"
                                        margin="0 3px 0 0"
                                        type="tips"
                                    ></u--text>
                                </template>
                            </u-input>
                        </view>
                    </view>
                    <view class="vital-sign-form-item" v-if="form.processValue != '10' && form.processValue != '5'">
                        <view class="form-item-label">血氧饱和度</view>
                        <view class="form-item-value">
                            <u-input v-model="form.xybhd" 
                                placeholder="请输入" 
                                border="none"
                                :adjustPosition="false">
                                <template slot="suffix">
                                    <u--text
                                        text="%"
                                        slot="prefix"
                                        margin="0 3px 0 0"
                                        type="tips"
                                    ></u--text>
                                </template>
                            </u-input>
                        </view>
                    </view>
                    <view class="vital-sign-form-item" v-if="form.processValue == '5'">
                        <view class="form-item-label">入量</view>
                        <view class="form-item-value">
                            <u-input v-model="form.rl" 
                                placeholder="请输入" 
                                border="none"
                                :adjustPosition="false">
                                <template slot="suffix">
                                    <u--text
                                        text="ml"
                                        slot="prefix"
                                        margin="0 3px 0 0"
                                        type="tips"
                                    ></u--text>
                                </template>
                            </u-input>
                        </view>
                    </view>
                    <view class="vital-sign-form-item">
                        <view class="form-item-label">备注信息</view>
                        <view class="form-item-value">
                            <u--textarea v-model="form.bzxx" 
                            placeholder="请输入内容" 
                            height="60"
                            border="none"></u--textarea>
                        </view>
                    </view>
                </view>
                <view class="submit-button">
                    <button style="width: 30%" @click="handleClose()">取消</button>
                    <button
                        class="primary-button"
                        style="width: calc(70% - 50rpx)"
                        @click="handleSubmit()"
                    >
                        确认
                    </button>
                </view>
            </view>
        </u-popup>
        <!-- 二次核对 -->
        <!-- 只有输血开始时需要核对 -->
        <DoubleCheck ref="transfusionDoubleCheck" @closeAndSubmit="doubleCheckCloseAndSubmit"></DoubleCheck>
        <!-- 巡视过程 -->
        <TourProcess ref="transfusionTourProcess" @select="handleTourPrcessSelect"></TourProcess>
    </view>
</template>

<script>
import { mapState } from "vuex"
import {
	getDateTimeString,
	getAdviceType,
	getPlanStatus,
    showToast,
} from "@/static/js/common.js"
import "@/static/css/common.scss"
// 二次核对
import DoubleCheck from './doubleCheck'
import TourProcess from './tourProcess'

export default {
	components: {},
	props: {
        bloodBag: { // 当前血袋
			type: Object,
			default:{},
		},
        patientInfo: { // 当前病人
			type: Object,
			default:{},
		},
    },
    components: {
		TourProcess,//巡视过程选框
		DoubleCheck,//二次核对
	},
	data() {
		return {
			visible: false, //弹窗显示
            showDatePicker:false,//日期选择器
            processIndex:[0],
            options:[
                {
                    label:'已签收',
					value:'1',
					usable:false,
                },
                {
                    label:'已取血',
					value:'2',
					usable:false,
                },
				{
					label:'输血开始',
					value:'3',
					usable:false,
				},
				{
					label:'输血开始后15分钟',
					value:'4',
					usable:true,
				},
				{
					label:'输血结束',
					value:'5',
					usable:true,
				},
				{
					label:'输血结束后一小时',
					value:'6',
					usable:true,
				},
				{
					label:'其他',
					value:'10',
					usable:true,
				},
				{
					label:'暂停',
					value:'11',
					usable:true,
				},
				{
					label:'继续',
					value:'12',
					usable:true,
				},
			],

            form:{
                processLabel:'',//巡视过程 名称
                processValue:'',//巡视过程 value

                datetime:'',//时间戳
                datetimeStr:'',//记录时间 串
                twType:'2',//体温 类型 默认选择腋温
                twValue:'',//体温
                mb:'',//脉搏
                ssy:'',//血压 收缩压
                szy:'',//血压 舒张压
                hx:'',//呼吸
                xybhd:'',//血氧饱和度
                rl:'',//入量
                bzxx:'',//备注信息
            },
            
            //双签表单
            doubleCheckForm:null
		}
	},
	watch: {},
	computed: {
		...mapState(["loginUser", "area"]),
	},
	beforeDestroy() {},
	mounted() {},
	methods: {
        // bloodBag：当前血袋
		show(bloodBag,isContinue) {
            console.log(bloodBag);
            this.form.processLabel = '';
            this.form.processValue = '';

            this.form.rl = bloodBag.volume;//自动显示入量

            let process;
            let nextProcess;
            if(isContinue){//继续输血
                nextProcess = {
                    label:'继续',
					value:'12',
					usable:true,
                }
                console.log('下一个状态：',nextProcess);
                this.form.processLabel = nextProcess.label;
                this.form.processValue = nextProcess.value;
            }else{
                process = this.options.find(el=>el.value == bloodBag.xdzt);//获取当前血袋状态对应的状态对象;
                console.log('当前状态：',process);
                if(process){
                    if(1 < Number(process.value) < 6 ){// 输血开始、输血开始后15分钟、输血结束 三种状态之一
                        nextProcess = this.options.find(el=>el.value == Number(bloodBag.xdzt)+1);
                        if(nextProcess){
                            console.log('下一个状态：',nextProcess);
                            this.form.processLabel = nextProcess.label;
                            this.form.processValue = nextProcess.value;
                        }
                    }
                }
            }
            
            
            let date = new Date()
            this.form.datetime = date.valueOf();
            this.form.datetimeStr = getDateTimeString(date);
			this.visible = true;
		},
        /**
		 * 打开 巡视过程 弹框
		 */
		openTour(){
            let obj = {
                selectedItem:{
                    label:this.form.processLabel,
                    value:this.form.processValue,
                }
            }
			this.$refs.transfusionTourProcess.show(obj,this.bloodBag);
		},
        /**
		 * 打开 二次核对 弹窗
		 */
		openDoubleCheck(){
			this.$refs.transfusionDoubleCheck.show();
		},
        //二次核对关闭 回调
        doubleCheckCloseAndSubmit(user){
            console.log('二核用户：',user);
            this.doubleCheckForm = user;
            /**
             * user 对象
             * {
             *      userName:'',//用户代码
             *      userId:'',//用户id
             *      userNa:'',//用户姓名
             * }
             */
            this.doSubmit();//提交
        },
		handleClose() {
            this.resetForm();
			this.visible = false;
		},
		handleSubmit() {
            if(!this.form.processValue){
                showToast(-1,'请选择巡视过程');
                return;
            }
            if(this.form.processValue == '3'){//输血开始
                this.openDoubleCheck();
            }else{
                //直接提交
                this.doSubmit();
            }
		},
        doSubmit(){
            if(Number(this.form.rl) > 9999.99){
                showToast(-1,'入量不得大于9999.99');
                return;
            }
            let params={
                barCode: this.bloodBag.barCode,//血袋码
                brId: this.patientInfo.brid,//病人id
                idOrg: this.loginUser.JGID,//机构id

                inspecTime: this.form.datetimeStr,//巡视时间

                inspecType: this.form.processValue == '11'?null:
                            this.form.processValue == '12'?null:
                            this.form.processValue,//巡视类型 3 输血开始 4输血开始后15分钟 5：输血结束 6 输血结束后一小时 10 其它 
                inspecTypeName: this.form.processLabel,//巡视类型名称
                suspendMark: this.form.processValue == '10'?'3':
                             this.form.processValue == '11'?'1':
                             this.form.processValue == '12'?'2':
                             '3',// 暂停标志 1 暂停 2 继续 3正常巡视
                xdzt: this.form.processValue == '10'?null:
                      this.form.processValue == '11'?null:
                      this.form.processValue == '12'?null:
                      this.form.processValue,//巡视类型

                //体征
                tw: this.form.processValue == '10'?null:
                    this.form.processValue == '5'?null:
                    this.form.twValue,//体温
                twType:this.form.processValue == '10'?null:
                        this.form.processValue == '5'?null:
                       (this.form.twType == '1'?'耳温':
                       this.form.twType == '2'?'腋温':
                       this.form.twType == '3'?'口吻':
                       this.form.twType == '4'?'肛温':''),//体温类型 名称
                mb: this.form.processValue == '10'?null:
                    this.form.processValue == '5'?null:
                    this.form.mb,//脉搏
                press: this.form.processValue == '10'?null:
                        this.form.processValue == '5'?null:
                       (this.form.ssy+'/'+this.form.szy),//血压
                breathe: this.form.processValue == '10'?null:
                        this.form.processValue == '5'?null:
                         this.form.hx,//呼吸
                sp0: this.form.processValue == '10'?null:
                    this.form.processValue == '5'?null:
                     this.form.xybhd,//血氧
                intake: this.form.processValue == '10'?null:
                        this.form.processValue == '11'?null:
                        this.form.processValue == '12'?null:
                        this.form.processValue == '5'?this.form.rl:null,//输血结束才传  入量
                notes: this.form.bzxx,//备注  

                //输血开始
                dtExecute: this.form.processValue == '10'?null:
                           this.form.processValue == '3'?this.form.datetimeStr:null,// 开始时间
                executorId1: this.form.processValue == '10'?null:
                            this.form.processValue == '3'?this.loginUser.YHID:null,// 执行人id 1       
                executorCode1: this.form.processValue == '10'?null:
                            this.form.processValue == '3'?this.loginUser.YHDM:null,// 执行人代码 1
                executorName1: this.form.processValue == '10'?null:
                            this.form.processValue == '3'?this.loginUser.YHXM:null,//执行人名称 1
                executorCode2: this.form.processValue == '10'?null:
                               this.form.processValue == '3'?this.doubleCheckForm.userName:null,//执行人代码 2
                executorId2: this.form.processValue == '10'?null:
                             this.form.processValue == '3'?this.doubleCheckForm.userId:null,//执行人id 2
                executorName2: this.form.processValue == '10'?null:
                               this.form.processValue == '3'?this.doubleCheckForm.userNa:null,//执行人名称 2
                            

                //开始后15分钟
                executeIdAfter: this.form.processValue == '10'?null:
                                this.form.processValue == '4'?this.loginUser.YHID:null,//开始后15分钟执行人
                naExecuteAfter: this.form.processValue == '10'?null:
                                this.form.processValue == '4'?this.loginUser.YHXM:null,//开始15分钟 执行人名字
                dtExecuteAfter: this.form.processValue == '10'?null:
                                this.form.processValue == '4'?this.form.datetimeStr:null,//开始后15分钟时间
                
                //输血结束
                userEnd: this.form.processValue == '10'?null:
                         this.form.processValue == '5'?this.loginUser.YHID:null,//结束人id
                naEnd: this.form.processValue == '10'?null:
                       this.form.processValue == '5'?this.loginUser.YHXM:null,//输血结束才传 结束人姓名
                dtEnd: this.form.processValue == '10'?null:
                       this.form.processValue == '5'?this.form.datetimeStr:null, //输血结束时间 如果当前巡视输血结束，则取当前时间，否则不传
                
                //结束后一小时
                userEndAfter: this.form.processValue == '10'?null:
                              this.form.processValue == '6'?this.loginUser.YHXM:null,//结束后一小时 执行人名称
                userIdEndAfter: this.form.processValue == '10'?null:
                                this.form.processValue == '6'?this.loginUser.YHID:null,//结束后一小时 执行人id
                dtEndAfter: this.form.processValue == '10'?null:
                            this.form.processValue == '6'?this.form.datetimeStr:null,// 输血结束后一小时 执行时间

            };
            return this.$commonAjax(
				"auth/mobile/advice/BloodTranSfusion/InspectInfo",
				params
			).then((res) => {
				if (res.res.ReType == 0) {
					showToast(res.res.ReType,res.res.Msg);
                    this.resetForm();//重置表单
                    this.handleClose();
                    setTimeout(()=>{
                        this.$emit('close');
                    },1000);
				}else{
                    showToast(res.res.ReType,res.res.Msg);
                    return;
                }
			})
        },
        //重置表单
        resetForm(){
            Object.assign(this.form,{
                processLabel:'',//巡视过程 名称
                processValue:'',//巡视过程 value

                datetime:'',//时间戳
                datetimeStr:'',//记录时间 串
                twType:'2',//体温 类型 默认选择 腋温
                twValue:'',//体温
                mb:'',//脉搏
                ssy:'',//血压 收缩压
                szy:'',//血压 舒张压
                hx:'',//呼吸
                xybhd:'',//血氧饱和度
                rl:this.form.rl,//入量
                bzxx:'',//备注信息
            });
            this.form.datetimeStr = getDateTimeString(new Date());
            this.doubleCheckForm = null;//置空二核表单
        },
        handleTourPrcessSelect(obj){
            console.log('confirm:', obj)
            this.resetForm();
            this.form.processLabel = obj.item.label;
            this.form.processValue = obj.item.value;
            this.processIndex = obj.index;
        },
        datePickerConfirm(e){
            console.log('datetime：',e);
            this.showDatePicker = false;
            this.form.datetime = e.value;
            this.form.datetimeStr = getDateTimeString(e.value);
        },
        datePickerCancel(){
            this.showDatePicker = false;
        },
	},
}
</script>

<style lang="scss">
.vital-sign-form {
	height: 950rpx;
	position: relative;
	padding: 20rpx;
	.vital-sign-form-title {
        font-weight: bold;
		font-size: 34rpx;
		text-align: center;
		margin-bottom: 20rpx;
	}
    .vital-sign-form-main{
        height: calc(100% - 100px);
        overflow-y: auto;
        .vital-sign-form-item{
            display: flex;
            margin-bottom: 20rpx;
            align-items: baseline;
            .form-item-label{
                font-size: 28rpx;
                color: #262626;
                width: 30%;
            }
            .form-item-value{
                position: relative;
                width: 70%;
                font-size: 30rpx;
                .u-input{
                    background-color: #F9F9F9 !important;
                    border-radius: 6rpx;
                    padding: 8rpx !important;
                }
                .u-textarea{
                    background-color: #F9F9F9 !important;
                    border-radius: 6rpx;
                    padding: 8rpx !important;
                }
                .u-radio{
                    margin-right: 20rpx;
                }
                .picker-wrapper{
                    position: absolute;
                    top: 0rpx;
                    width: 100%;
                    height: 100%;
                    z-index: 100;
                }
            }
        }
    }
}
.submit-button {
    display: flex;
    position: absolute;
    bottom: 20rpx;
    width: 100%;
    button {
        color: #262626;
        background-color: #ffffff;
        margin: 5rpx;
    }
    .primary-button {
        color: #ffffff;
        background-color: #4088fe;
    }
}

</style>
